<!--富文本组件-->
<!-- tinymc富文本 -->
<template>
    <div class="hide">
        <editor
            v-model="myValue"
            :init="init"
            :disabled="disabled"
            @onClick="onClick"
        >
        </editor>
    </div>
</template>

<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/skins/ui/oxide/skin.css";
import "@/assets/tinymce/zh_CN.js"; // 本地汉化
import "tinymce/themes/silver/theme";
import "tinymce/plugins/image";
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
// import "tinymce/icons/default"; // 图标 -解决测试环境找不icon问题
export default {
    name: "tinymce",
    components: {
        Editor,
    },
    props: {
        // 显示模式 false 编辑模式  true 只读模式
        displayMode: {
            type: Boolean,
            default: false
        },
        //传入一个value，使组件支持v-model绑定
        value: {
            type: String,
            default: "",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        plugins: {
            type: [String, Array],
            default:
            // ' anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists   noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
                "lists image media table  wordcount ",
        },
        toolbar: {
            type: [String, Array],
            default:
            // 'undo redo | searchreplace | bold  italic | underline | strikethrough | alignleft  aligncenter alignright | outdent indent  blockquote  removeformat subscript superscript code codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime  table  forecolor backcolor'
                "undo redo |  formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat hr",
        },
    },
    data() {
        return {
            //初始化配置
            init: {
                language_url: "@/asset/tinymce/langs/zh_CN.js", // 这里需要单独处理
                language: "zh_CN",
                height: 500,
                width:1200,
                plugins: this.plugins,
                toolbar: this.toolbar,
                branding: true,
                menubar: true,
                //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
                //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
                images_upload_handler: (blobInfo, success, failure) => {
                    const img = "data:image/jpeg;base64," + blobInfo.base64();
                    success(img);
                },
                resize: true,
            },
            myValue: this.value,
        };
    },
    beforeMount() {
        tinymce.init({});
    },
    mounted() {
        // 只读模式下，富文本的编辑配置
        if (this.displayMode) {
            setTimeout(() => {
                let contentWindow = document.getElementsByClassName("tox-edit-area__iframe").item(0).contentWindow
                let aWindowHeight =
                    contentWindow.document.documentElement.scrollHeight ||
                    contentWindow.document.body.scrollHeight;
                document.getElementsByClassName("tox-edit-area__iframe").item(0).setAttribute("style", `background-color: ${getComputedStyle(document.documentElement).getPropertyValue('--change-backgroud-color')}`)
                contentWindow.document.body.setAttribute("style", "overflow: hidden;")
                contentWindow.document.body.setAttribute("contenteditable", "false");
                document.getElementsByClassName("tox-tinymce").item(0).setAttribute("style", `height: ${aWindowHeight}px`)
                document.getElementsByClassName("tox-editor-header").item(0).setAttribute("style", `display: none`)
                document.getElementsByClassName("tox-statusbar").item(0).setAttribute("style", `display: none`)
            }, 100)
        }
    },
    methods: {
        //添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
        //需要什么事件可以自己增加
        onClick(e) {
            this.$emit("onClick", e, tinymce);
        },
        clear() {
            this.myValue = "";
        },
    },
    watch: {
        value(newValue) {
            this.myValue = newValue;
        },
        myValue(newValue) {
            this.$emit("input", newValue);
        },
    },
};
</script>
<style scoped lang="scss">
:deep(.tox-tinymce) {
    width: 100% !important;
}

//.hide {
//    :deep(.tox-editor-header) {
//        display: none;
//    }
//    :deep(.tox-statusbar) {
//        display: none;
//    }
//}
</style>
